<template>
	<view class="content">
		<view style="height: 40rpx;"></view>
		<view class="wid90 mar borRad20 bacFFF">
			<view class="wid90 mar dis disAl hei80">
				<view style="width: 35%;">诊所名称：</view>
				<input style="width: 65%;" :value="name" @input="nameInput" placeholder="请输入诊所名称"/>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar dis disAl hei80">
				<view style="width: 35%;">负责人：</view>
				<input style="width: 65%;" :value="user" @input="userInput" placeholder="请输入负责人"/>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar dis disAl hei80">
				<view style="width: 35%;">负责人电话：</view>
				<input style="width: 65%;" :value="user_phone" @input="userPhoneInput" placeholder="请输入负责人电话"/>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar dis disAl hei80">
				<view style="width: 35%;">诊所地址：</view>
				<picker mode="region" style="width: 65%;" @change="districtChange" :value="date">
					<view v-if="province">{{province+'-'+city+'-'+area}}</view>
					<view v-if="!province" class="wid100 hei80 dis disAl" style="color: #8A8A8A;">请选择诊所地址</view>
				</picker>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar dis disAl hei80">
				<view style="width: 35%;">详细地址：</view>
				<input style="width: 65%;" :value="address" @input="addressInput" placeholder="请输入详细地址"/>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar" style="font-weight: bold;margin-top: 15px;">
				资质上传
			</view>
			<view class="wid90 mar" style="display: flex;justify-content: space-around;flex-wrap: wrap;margin-top: 15px;">
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 40%;margin-bottom: 20px;" @click="upimg(1)">
					<image :src="url+doorhead" style="width: 200rpx;height: 200rpx"></image>
					<view class="" style="font-size: 26rpx;font-weight: bold;margin-top: 10px;">
						门头照片
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 40%;margin-bottom: 20px;" @click="upimg(2)">
					<image :src="url+business" style="width: 200rpx;height: 200rpx"></image>
					<view class="" style="font-size: 26rpx;font-weight: bold;margin-top: 10px;">
						营业执照副本
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 40%;margin-bottom: 20px;" @click="upimg(3)">
					<image :src="url+permit" style="width: 200rpx;height: 200rpx"></image>
					<view class="" style="font-size: 26rpx;font-weight: bold;margin-top: 10px;">
						医疗机构职业许可证
					</view>
				</view>
				<view class="" style="display: flex;flex-direction: column;align-items: center;width: 40%;margin-bottom: 20px;" @click="upimg(4)">
					<image :src="url+contract_seal" style="width: 200rpx;height: 200rpx"></image>
					<view class="" style="font-size: 26rpx;font-weight: bold;margin-top: 10px;">
						合同盖章页
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="wid80 mar hei80 borRad20 dis disAl disJuC foSi40 mar-top30 coFFF" 
				style="background-color: #1262DB;" @click="addEdit">提交</view>
			<view class="foSi25 textCen mar-top30" @click="callPhone">
				<view style="font-weight: 600;">商务热线</view>
				<view class="mar-top10" style="color: #797878;">{{tel}}</view>
			</view>
			<view class="foSi25 textCen mar-top30" @click="tiaozhuan('/pages/common/richtext?data='+agreement)">
				<view style="font-weight: 600;">相关合同</view>
				<view class="mar-top10" style="color: #797878;">《乐优康签订协议》</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				name: '',
				user: '',
				user_phone: '',
				province: '',
				city: '',
				area: '',
				address: '',
				id: '',
				tel: '',
				agreement: '',
				doorhead:'wechatimg/upimg.png', // 门头照片
				business:'wechatimg/upimg.png', // 营业执照副本
				permit: 'wechatimg/upimg.png', // 医疗机构职业许可证
				contract_seal: 'wechatimg/upimg.png', //合同盖章页
			}
		},
		onLoad(options) {
			if(uni.getStorageSync('clinicdetail')){
				var list = uni.getStorageSync('clinicdetail')
				console.log(list)
				this.id = list.id
				this.name = list.name
				this.user = list.user
				this.user_phone = list.user_phone
				this.province = list.province
				this.city = list.city
				this.area = list.area
				this.address = list.address
				this.doorhead = list.doorhead
				this.business = list.business
				this.permit = list.permit
				this.contract_seal = list.contract_seal
				
			}
			
			this.gteAgreement()
		},
		methods: {
			
			upimg(index){
				var that = this
				uni.chooseImage({
				    count: 1, //上传图片的数量，默认是9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        const tempFilePaths = res.tempFilePaths;    //拿到选择的图片，是一个数组
						that.shangchuan(tempFilePaths,index)
				    }
				});
			},
			shangchuan(tempFilePaths,index){
				var that = this
				console.log(that.global)
				console.log(tempFilePaths)
				uni.uploadFile({
					url: that.global.url + '/api/common/upload',
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							if(index == 1){
								that.doorhead = apiresult.data.url
							}else if(index == 2){
								that.business = apiresult.data.url
							}else if(index == 3){
								that.permit = apiresult.data.url
							}else if(index == 4){
								that.contract_seal = apiresult.data.url
							}
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error'
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error'
						})
					}
				});
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			// 拨打电话
			callPhone() {
				var that = this
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: that.tel,
						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [that.tel],
						success: function(res) {
							console.log(res);
							uni.makePhoneCall({
								phoneNumber: that.tel,
							})
						}
					})
				}
			},
			gteAgreement(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/index/agreement',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.tel = result.data.tel
							that.agreement = result.data.agreement
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
				        }
				    }
				})
			},
			nameInput: function(e){
				this.name = e.target.value
			},
			userInput: function(e){
				this.user = e.target.value
			},
			userPhoneInput: function(e){
				this.user_phone = e.target.value
			},
			addressInput: function(e){
				this.address = e.target.value
			},
			districtChange(e){
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.area = e.detail.value[2];
			},
			addEdit(){
				var that = this
				if(!that.name){
					uni.showToast({
						title: '请输入诊所名称',
						icon: 'error'
					})
					return
				}
				if(!that.user){
					uni.showToast({
						title: '请输入负责人',
						icon: 'error'
					})
					return
				}
				let reg = /^[1][2,3,4,5,7,8,9][0-9]{9}$/      //正则表达式定义手机号正确格式
				if (!reg.test(this.user_phone)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if(!that.province){
					uni.showToast({
						title: '请选择诊所地址',
						icon: 'error'
					})
					return
				}
				if(!that.address){
					uni.showToast({
						title: '请输入具体地址',
						icon: 'error'
					})
					return
				}
				// doorhead:'wechatimg/upimg.png', // 门头照片
				// business:'wechatimg/upimg.png', // 营业执照副本
				// permit: 'wechatimg/upimg.png', // 医疗机构职业许可证
				// contract_seal: 'wechatimg/upimg.png', //合同盖章页
				if(that.doorhead == 'wechatimg/upimg.png' || that.business == 'wechatimg/upimg.png' || that.permit == 'wechatimg/upimg.png' || that.contract_seal == 'wechatimg/upimg.png'){
					uni.showToast({
						title: '请补全资质图片',
						icon: 'error'
					})
					return
				}
				uni.request({
				    url: that.global.url + 'api/clinic/add_edit',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {
						name: this.name,
						user: this.user,
						user_phone: this.user_phone,
						province: this.province,
						city: this.city,
						area: this.area,
						address: this.address,
						id: this.id,
						system_type:uni.getStorageSync('system_type'),
						doorhead: that.doorhead,
						business: that.business,
						permit: that.permit,
						contract_seal: that.contract_seal
					},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
							setTimeout(()=>{
								uni.navigateBack({delta: 1})
							},1000)
							
						}else{
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
				        }
				    }
				})
			},
			
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #1262DB;
	}
</style>
